<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Chat - Push Stream Module Example</title>
    <style type="text/css">
      form p { min-height: 20px;}
    </style>
</head>
<body>
    <form action="/pub" method="POST">
        <p>
            <span style="display: block; float: left; width: 55px;">mode:</span>
            <span id="mode"></span>
        </p>
        <p>
            <span style="display: block; float: left; width: 55px;">satus:</span>
            <span class="online" style="display:none; color:green">online</span>
            <span class="offline" style="display:block; color:red">offline</span>
        </p>
        <p>
            <label for="room">Room:</label>
            <input type="text" name="room" value="example" id="room" />
        </p>
        <p>
            <label for="nick">Nick:</label>
            <input type="text" name="nick" value="" id="nick" />
        </p>
        <p>
            <label for="chat">Chat:</label>
            <textarea name="chat" rows="8" cols="40" id="chat" readonly="readonly"></textarea>
        </p>
        <p>
            <label for="message">Text:</label>
            <textarea name="message" rows="2" cols="40" id="message"></textarea>
        </p>
        <p><input type="submit" value="Send" id="sendButton"/></p>
    </form>
    <p><input type="button" value="Show Log" id="showLog"/><input type="button" value="Hide Log" id="hideLog" style="display:none"/></p>
    <div id="log" style="width:800px;height:200px;display:none;"></div>

    <script src="/js/jquery.min.js" type="text/javascript" language="javascript" charset="utf-8"></script>
    <script src="/js/pushstream.js" type="text/javascript" language="javascript" charset="utf-8"></script>
    <script type="text/javascript" language="javascript" charset="utf-8">
    // <![CDATA[
    PushStream.LOG_LEVEL = 'debug';
    var pushstream = new PushStream({
      host: window.location.hostname,
      port: window.location.port,
      modes: "websocket|eventsource|stream"
    });
    pushstream.onmessage = _manageEvent;
    pushstream.onstatuschange = _statuschanged;

    function onSendText() {
      $("#message").val('');
    };

    function _manageEvent(eventMessage) {
      var chat = $("#chat");
      if (eventMessage != '') {
        var values = $.parseJSON(eventMessage);
        var line = values.nick + ': ' + values.text.replace(/\\r/g, '\r').replace(/\\n/g, '\n');
        if (chat.val() == '') {
          chat.val(line);
        } else {
          chat.val(chat.val() + '\n' + line);
        }

        var lines = chat.val().split('\n');
        if (lines.length > 100) {
          chat.val(lines.slice(-100).join('\n'));
        }
      }
      chat.scrollTop(chat[0].scrollHeight - chat.height());
    };

    function _statuschanged(state) {
      if (state == PushStream.OPEN) {
        $(".offline").hide();
        $(".online").show();
        $("#mode").html(pushstream.wrapper.type);
      } else {
        $(".offline").show();
        $(".online").hide();
        $("#mode").html("");
      }
    };

    function _connect(channel) {
      pushstream.removeAllChannels();
      try {
        pushstream.addChannel(channel);
        pushstream.connect();
      } catch(e) {alert(e)};

      $("#chat").val('');
    }

    $("#sendButton").click(function(){
      if (($("#nick").val() != "") && ($("#message").val() != "") && ($("#room").val() != "")) {
        pushstream.sendMessage('{"nick":"' + $("#nick").val() + '", "text":"' + $("#message").val().replace(/\r/g, '\\\\r').replace(/\n/g, '\\\\n') + '"}', onSendText);
      } else {
        alert("nick, room and text are required");
      }

      return false;
    });

    $("#room").change(function(){
      _connect($("#room").val());
    });

    $("#showLog").click(function(){
      $("#log").html('<textarea id="Log4jsLogOutput" rows="10" cols="100"></textarea>').show();
      $("#showLog").hide();
      $("#hideLog").show();
    });

    $("#hideLog").click(function(){
      $("#Log4jsLogOutput").remove();
      $("#log").html('').hide();
      $("#hideLog").hide();
      $("#showLog").show();
    });

    _connect($("#room").val());
    // ]]>
    </script>
</body>
</html>
